<template>
	<view>
		<view class="colorBg">
			<view class="userInfo">
				<view class="userImg">
					<image :src="userInfo.userImg" mode="widthFix"></image>
				</view>
				<view class="userName" v-if="token"  @click="toLogin">{{userInfo.username}}</view>
				<view class="userName" v-if="!token" @click="toLogin">前往登录</view>
			</view>
		</view>
		<view class="itemList">
			<button type="default" @click="toOrderList">我的订单</button>
			<button class="logout-btn" type="default"  v-if="token" @click="logout" >登出</button>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo:{},
				token:'',
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow(){
			if (this.token) {
				uni.request({
					url: 'http://localhost:8080/checkTokenStatus',
					method: 'GET',
					data: {
						token:this.token,
					},
					success: res => {
						if (res.data == true) {
							uni.removeStorageSync("token");
							uni.showToast({
								icon:"none",
								title:"登录已过期"
							})
							this.getUserInfo();
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		methods: {
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login',
				});
			},
			getUserInfo(){
				this.token=uni.getStorageSync("token");
				if (this.token!='') {
					uni.request({
						url: 'http://localhost:8080/findUserInfo',
						method: 'GET',
						data: {
							token:this.token,
						},
						success: res => {
							this.userInfo=res.data;
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toOrderList(){
				if(this.token){
					uni.navigateTo({
						url: '/pages/orderList/orderList',
					});
				}else{
					uni.showToast({
						icon:"error",
						title:"请先登录"
					})
				}
			},
			logout(){
				uni.removeStorageSync("token");
				uni.reLaunch({
					url:"/pages/my/my"
				})
			}
		}
	}
</script>

<style lang="scss">
	.colorBg {
		position: relative;
		height: 200rpx;
		background: linear-gradient(to bottom, #1296db, #f7f7f7);
	}

	.userInfo {
		text-align: center;
		padding-top: 80rpx;
		.userImg{
			display: inline-block;
			width: 180rpx;
			height: 180rpx;
			background-color: #ececec;
			border-radius: 50%;
			overflow: hidden;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.userName{
			color: #646566;
			font-size: 42rpx;
		}
	}
	
	.itemList{
		margin: 0 100rpx;
		margin-top: 200rpx;
		
	}
	
	.logout-btn{
		// margin-top: 500rpx;
	}
</style>